
<template>
  <div class="params-info" v-show="Object.keys(paramsInfo).length">

    <table v-for=" (table , x) in paramsInfo.sizes " :key="x" class="params-sizes">
      <tr v-for=" (tr , y) in  table" :key="y">
        <td v-for="(v,z) in tr" :key="z">{{v}}</td>
      </tr>
    </table>
    <table class="params-infos">
      <tr v-for="(v,i) in  paramsInfo.infos" :key="i">
        <td class="params-info-key">{{v.key}}</td>
        <td class="params-info-value">{{v.value}}</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  name: 'detailParamsInfo',
  props: {
    paramsInfo: {
      type: Object,
      default() {
        return {}
      }
    }
  }
}
</script>

<style scoped>
.params-info {
  padding: 20px 10px;
  border-bottom: 5px solid #eee;
  font-size: 14px;
}
.params-info table {
  width: 100%;
  border-collapse: collapse;
}
.params-info tr {
  height: 45px;
  border-bottom: 1px solid rgba(100, 100, 100, 0.1);
}
.params-info-key {
  width: 80px;
}
.params-info-value {
  color: var(--color-tint);
}
</style>